<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>图表</title>

</head>
<body>
<div id="thing_overview_page" data-role="page" class="page">
    <div data-role="header" data-theme="f">
        <a href="${contextPath}/m/dashboard" data-icon="home" data-direction="reverse" data-transition="slide">主页</a>

        <h1>图表</h1>
        <a href="../overview" data-icon="arrow-l" data-direction="reverse" data-transition="flip">返回</a>

        <div class="segmented-control ui-bar-c center">
            <div data-role="controlgroup" data-type="horizontal" style="margin: 0.2em;">
                <a href="javascript:void(0);" data-role="button" class="ui-btn-active">按状态</a>
                <a href="priority" data-role="button" data-ajax="false">按优先级</a>
            </div>
        </div>
    </div>
    <div data-role="content">
        <div class="chart-context">
            <canvas id="thingStatusChart"></canvas>
        </div>
        <div style="margin-top: 5px;font-size: 10px;">
            图例:&nbsp;&nbsp;
            <c:forEach items="${statusStatisticsDto.dataList}" var="ps" varStatus="s">
                <span style="color:${statusStatisticsDto.availableHtmlColors[s.index+4]};">&Delta;</span>${ps.status.label}
                &nbsp;
            </c:forEach>
        </div>
    </div>

    <script src="${contextPath}/js/jquery/Chart/Chart.min.js"></script>
    <script>
        var chartHeight = document.body.clientHeight - 130;
        if (chartHeight < 50) {
            chartHeight = 50;
        }
        var chartWidth = document.body.clientWidth - 30;
        if (chartWidth < 50) {
            chartWidth = 50;
        }
        var length = (chartHeight > chartWidth ? chartWidth : chartHeight);

        $("#thingStatusChart").attr("height", length)
                .attr("width", length);

        var data = new Array(${statusStatisticsDto.size});
        <c:forEach items="${statusStatisticsDto.dataList}" var="ps" varStatus="s">
        data[${s.index}] = {
            value:${ps.count},
            color:"${statusStatisticsDto.availableHtmlColors[s.index+4]}"
        };
        </c:forEach>

        var context = $("#thingStatusChart").get(0).getContext("2d");
        var myLine = new Chart(context).Pie(data);
    </script>
</div>
</body>
</html>